<template>
  <ul>
    <li v-for="item in bookStore.bookList" :key="item.id" @click="handleClick(item)">
      {{ item.title }}
    </li>
  </ul>
</template>

<script setup lang="ts">
import { useBookStore } from '@/stores/useBookStore'
const router = useRouter()

const bookStore = useBookStore()

function handleClick(item: any) {
  router.push(`/list/${item.id}`)
}
</script>

<style scoped lang="less">
  ul {
    list-style: none;
    li {
      cursor: pointer;
      text-decoration: underline;
    }
  }
</style>
